<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/base.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聊天屏蔽管理</title>
<style type="text/css">
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
	.p-c-flexwrapper > span {
		width:163px;
		text-align: right;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.p-c-flexwrapper > .form-control {
		width:168px;
	}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
.hidden-td {
	display:none;
}
</style>
</head>
<body>
	<div style="display:flex;"><button  class="save btn btn-primary btn-lg" >新增屏蔽规则</button></div>
	<table id="table-i-qqAccountList" class="table table-striped table-bordered table-hover" style="margin-top: 20px;">
		<thead>
			<tr>
				<th style="display:none;"></th>
				<th>敏感字符</th>
				<th>替换字符</th>
				<th>用户操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div>
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="addAndEditModal" aria-hidden="true">
			<div class="modal-dialog" style="width:1000px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">新增屏蔽规则</h4>
					</div>
					<div class="modal-body">
						<p class="p-c-flexwrapper"><span>敏感字符：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText" rows="4"></textarea></p>
						<p class="p-c-flexwrapper"><span>替换字符：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control replaceText" rows="4"></textarea></p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success btn-saveAllOptions">保存</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除该条规则吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>	
	
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   		
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script type="text/javascript">
		$("#table-i-qqAccountList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[10, 20],
	       "searching": false,
	       "dom": `ftp`,
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/kajhsgweasdqtwehghasfdnsak6868/findChatShieldingWords.do",
	         },
	         "columns": [
						 {"data": "id", "className": "id-edit-td hidden-td"},
						 {"data": "str", "className": "str-edit-td"},
						 {"data": "replaceStr", "className": "replaceStr-edit-td"},
	                     {"data": null, "defaultContent": "<button class='btn btn-danger btn-del-role'>删除</button>"},
	                 ]        
	   		 })		
	   		$(".save.btn-lg").on("click", function(e) {
	   			$("#addAndEditModal").modal("show")
	   		}) 
	   		$(".btn-saveAllOptions").on("click", function(e) {
	   			var normalText = $(".normalText").val()
	   			if (normalText.trim() === "") {
	   				showNoticeModal("敏感字符不得为空")
	   				return
	   			}
	   			var repeatText = $(".replaceText").val()
	   			if (repeatText.trim() === "") {
	   				showNoticeModal("自动替换字符不得为空")
	   				return
	   			}
				$.ajax({
					  url: "/kajhsgweasdqtwehghasfdnsak6868/addChatShieldingWords.do",
					  type: "post",
					  data: {
						  str: normalText,
						  replaceStr: repeatText,
					  },
					  success:function(data){
					  	  $("#addAndEditModal").modal("hide");
					  	  showNoticeModal("操作成功！")
					  	  $("#table-i-qqAccountList").DataTable().ajax.reload()
					  },
					  error: function() {
						  showNoticeModal("操作失败")
					  }
				})			
	   		})
	   	bindDelItemEvent("#table-i-qqAccountList", ".btn-del-role", "/kajhsgweasdqtwehghasfdnsak6868/deleteChatShieldingWords.do")		
	</script>
</body>
</html>